 import React,{Component} from 'react';
import './test.less'
import {PullToRefresh, ListView, Button, Toast} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import http from "../../model/http";
let pageIndex = 0;
export default class ListViewDemoClass extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            dataSource,
            datas:[],
            pageIndex:1,
            refreshing: true,
            isLoading: true,
            useBodyScroll: false,
            dataBlobs: {},
            sectionIDs:[],
            rowIDs:[],
            dataArr:[],//关键代码
        };
    }
    genData(ref=false,page=0) {
        //获取数据
        let that=this;
        http.outPost('/customer/searchCustomer',{
             params:'20091',
             page:page+1,
             items:10,
             hosId:6,
             userId:'ChenXianLin',
             managerId:1407611596788060161
         }).then(function (res){
             if(res.result==0){
                 const lg = res.data.length;
                 if(lg<=0){
                     Toast.success('没有数据了~',1);
                     that.state.isLoading=false
                     return false;
                 }
                 let dataArr = that.state.dataArr;//关键代码
                 let m=that.state.datas;
                 for (let i = 0; i < lg; i++) {
                     //每一次读取的数据都进行保存一次
                     dataArr.push(`row - ${(that.state.pageIndex * lg) + i}`);
                     m.push(res.data[i])
                 }
                 if(ref){
                     //这里表示刷新使用
                     that.setState({
                         datas:res.data,
                         pageIndex:that.state.pageIndex+1,
                         dataSource: that.state.dataSource.cloneWithRows(dataArr),
                         refreshing: false,
                         isLoading: false,
                         //保存数据进state
                         dataArr:dataArr
                     });
                 }else{
                     //这里表示上拉加载更多
                     that.rData = { ...that.rData, ...dataArr };
                     that.setState({
                         datas:m,
                         pageIndex:that.state.pageIndex+1,
                         dataSource: that.state.dataSource.cloneWithRows(that.rData),
                         refreshing: false,
                         isLoading: false,
                         //保存数据进state
                         dataArr:dataArr
                     });
                 }
             }else{
                 Toast.fail('请求失败',1.5);
             }



        });
    }

    componentDidMount() {
        this.genData(true,0);
    }
    onRefresh = () => {
        let that=this;
        this.setState({ refreshing: true, isLoading: true,pageIndex:1 });
        setTimeout(() => {
            that.genData(true,0);
        }, 2000);
    };
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true,pageIndex:this.state.pageIndex+1 });
        let that=this;
        setTimeout(() => {
            that.genData(false,++pageIndex);
        }, 1000);
    };
    //这下面的代码跟官网没啥区别，唯一不同的是把外部定义的数据都保存进了state
    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 8,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );
        let index = this.state.datas.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = this.state.datas.length - 1;
            }
            const obj = this.state.datas[index--];
            return (
                <div key={rowID}
                     style={{
                         padding: '0 15px',
                         backgroundColor: 'white',
                         height:'4rem'
                     }}
                >
                    <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}>
                        {obj.title}
                    </div>
                    <div style={{ display: 'flex', padding: '15px' }}>
                        <div style={{ display: 'inline-block' }}>
                            <div style={{ fontSize: '16px' }}>
                                {obj.customerName}
                                <span style={{ fontSize: '30px', color: '#FF6E27' }}>{parseInt(rowID) +1}</span>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };
        return (<div>
            <ListView
                key={this.state.useBodyScroll ? '0' : '1'}
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : '加载完毕，没有更多数据了~'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll
                style={this.state.useBodyScroll ? {} : {
                    border: '1px solid #ddd',
                    margin: '5px 0',
                }}
                pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                />}
                onEndReachedThreshold={1000}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>);
    }
}
